<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>小A智能创新团队介绍网页</title>
  <!-- 设置网站小图标 -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <!-- 外部样式表 -->
  <link rel="stylesheet" href="style.css" type="text/css" />
  <!-- 导入Google noto思源字体 -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">
  <script>
    window.onload = function () {

      var carouselList1 = document.getElementById("carouselList1");
      var index = 0;
      var currentBtn = document.getElementById("btn1");
      currentBtn.style.backgroundColor = "#ffd155";
      currentBtn.style.borderColor = "#0f9cf5";
      var lastBtn = document.getElementById("btn3");

      //获取当前ul中的li个数，即轮播的页数
      var liNum = carouselList1.getElementsByTagName('li').length;

      // 利用定时器，并修改按钮，实现自动轮播效果
      var carouselFun = function () {
        carouselList1.style.transform = "translate(" + (-1192 * index) + "px, 0)";
        lastBtn.style.backgroundColor = "#fff";
        lastBtn.style.borderColor = "#737373";
        currentBtn.style.backgroundColor = "#ffd155";
        currentBtn.style.borderColor = "#0f9cf5";
        index++;
        if (index >= liNum) {
          index = 0;
        }
        lastBtn = currentBtn;
        currentBtn = document.getElementById("btn" + (index + 1));
      }
      var timer = setInterval(carouselFun, 1000);
      for (i = 0; i < liNum; i++) {

        document.getElementById("btn" + (i + 1)).onclick = function () {
          clearInterval(timer);
          var str1 = this.id;
          var index = str1.replace(/[^\d]/g, '') - 1;
          lastBtn = currentBtn;
          currentBtn = this;
          timer = setInterval(carouselFun, 1000);
        };
      }
    };
  </script>
</head>

<body>
  <!-- 页头 -->
  <div id="headerBox">
    <div class="head">
      <img src="img/Alogo.png" alt="小A图标" id="teamLogo" />
      <ul>
        <li>
          <a href="#">首页</a>
          <div class="line"></div>
        </li>
        <li>
          <a href="#">学习路线</a>
          <div class="line"></div>
        </li>
        <li>
          <a href="#">知识库</a>
          <div class="line"></div>
        </li>
        <li>
          <a href="#">其他</a>
          <div class="line"></div>
        </li>
        <li>
          <a href="#">更多</a>
          <div class="line"></div>
        </li>
        <li>
          <a href="#">登录</a>
          <div class="line"></div>
        </li>
      </ul>
    </div>
  </div>

  <!-- 第一页 -->
  <div class="pageBox">
    <div class="innerBox" id="sloganA">
      <div id="slogan">
        <p class="Title">ALWAYS<br />BE A !</p>

        <div class="Title">
          <p>小A智能创新团队</p>
          <div class="blueBall" id="blueBall1"></div>
        </div>
        <div class="Title">LOOKING FORWARD TO<div class="titlebg"></div>
        </div>
        <div class="Title">YOU COMMING<div class="titlebg"></div>
        </div>
        <div class="yellowRing"></div>
      </div>
      <img src="img/robot.png" alt="robot" />
      <ul class="smallballBox balls1">
        <li class="smallball"></li>
        <li class="smallball"></li>
        <li class="smallball"></li>
      </ul>
    </div>
  </div>
  <!-- 第二页 -->
  <div class="pageBox">
    <div class="innerBox">
      <h1 class="pageTitle">
        <span class="pageTitle">
          团队风采
          <div class="blueBall" id="blueBall2"></div>
        </span>
      </h1>

      <div class="textAll pageTitle">
        听说在宇宙工大，有这样一群人，奖学金年年榜上有名，获奖无数，保研实习轻松来!
      </div>
      <div class="textAll pageTitle">
        听说在宇宙工大，有这样一支团队，办公环境舒适，设备精良，经费充足，技术高精尖!
      </div>

      <!-- 利用video标签播放视频，用poster属性设置封面 -->
      <!-- 视频封面文件名video拼错了，维持原状 -->
      <div id="videoBox">
        <video width="900px" height="506px" controls poster="img/vedioCover.png">
          <source src="video/littleA.mp4" type="video/mp4" />
          您的浏览器不支持 video 标签。
        </video>
      </div>
      <div class="textAll pageTitle">
        竞赛场上英姿飒爽，团队氛围和谐融治。这支优秀的团队是<span>小A智能创新创业团队</span>!
      </div>
    </div>
  </div>
  <!-- 第三页 -->
  <div class="pageBox">
    <div class="innerBox">
      <h1>关于我们</h1>
      <p class="textAll" id="professor">
        小A智能创新创业团队成立于2015年10月，由广工大<span>于兆勤教授、管贻生教授、刘建群教授</span>联合指导。
      </p>
      <p class="textAll">
        主要以创新推动发展为落脚点，负责科研项目开发迭代、研究课题技术落实、创新竞赛答辩展示、创新项目立项结题、技术方案专利保护等，为整个小A团队提供技术支持。
      </p>
      <img src="img/groupPhoto.png" alt="小A团队合照" />
      <ul id="balls3">
        <li class="smallball"></li>
        <li class="smallball"></li>
        <li class="smallball"></li>
      </ul>
    </div>
  </div>

  <!-- 第四页 -->
  <!-- 介绍页面，使用背景1 -->
  <div class="pageBox" id="bg1">
    <div class="innerBox">
      <h1>团队荣耀</h1>
      <p class="textAll">国家级发明及实用新型专利共计<span>50余项</span></p>
      <p class="textAll">
        国家级奖项<span>20余项</span>，省级以上项目立项<span>10余项</span>
      </p>
      <p class="textAll">累计获得近<span>300万资金</span></p>
      <p class="textAll">深度合作企业8家，孵化在营企业2家</p>
      <!-- 点击轮播 ---------------->


      <div class="carousel" style="margin-top: 80px">
        <ul id="carouselList1">
          <li>
            <div class="present">
              <div class="presentBox">
                <img src="img/11ICAN.png" alt="11ICAN.png" />
                第11届ICAN国际大学生<br />创新创业大赛：一等奖
              </div>
              <div class="presentBox">
                <img src="img/2019youth.png" alt="2019youth.png" />
                2019年创青春全国大学生创业<br />大赛省赛:金奖(1)银奖(1)
              </div>
              <div class="presentBox">
                <img src="img/2019glodbrick.png" alt="2019glodbrick.png" />
                2019年金砖国家创客大赛<br />特等奖(1)一等奖(1)
              </div>

              <div class="presentBox">
                <img src="img/2018youth.png" alt="2018youth.png" />2018年创青春全国大学生创业大赛<br />省赛:金奖(1)银奖(1)
              </div>
            </div>
          </li>
          <li>
            <div class="present">
              <div class="presentBox">
                <img src="img/11ICAN.png" alt="11ICAN.png" />
                师兄真帅<br />师姐真美
              </div>
              <div class="presentBox">
                <img src="img/2019youth.png" alt="2019youth.png" />
                师兄真帅<br />师姐真美
              </div>
              <div class="presentBox">
                <img src="img/2019glodbrick.png" alt="2019glodbrick.png" />
                师兄真帅<br />师姐真美
              </div>

              <div class="presentBox">
                <img src="img/2018youth.png" alt="2018youth.png" />
                师兄真帅<br />师姐真美
              </div>
            </div>
          </li>
          <li>
            <div class="present">
              <div class="present">
                <div class="presentBox">
                  <img src="img/11ICAN.png" alt="11ICAN.png" />
                  小A牛啊<br />小A厉害
                </div>
                <div class="presentBox">
                  <img src="img/2019youth.png" alt="2019youth.png" />
                  小A牛啊<br />小A厉害
                </div>
                <div class="presentBox">
                  <img src="img/2019glodbrick.png" alt="2019glodbrick.png" />
                  小A牛啊<br />小A厉害
                </div>

                <div class="presentBox">
                  <img src="img/2018youth.png" alt="2018youth.png" />
                  小A牛啊<br />小A厉害
                </div>
              </div>
          </li>
        </ul>
        <button id="btn1"></button>
        <button id="btn2"></button>
        <button id="btn3"></button>
      </div>


      <ul class="smallballBox balls2">
        <li class="smallball"></li>
        <li class="smallball"></li>
        <li class="smallball"></li>
      </ul>
    </div>
  </div>

  <!-- 第五页 -->
  <!-- 介绍页面，使用背景2 -->
  <div class="pageBox" id="bg2">
    <div class="innerBox">
      <h1>项目资源</h1>
      <p class="textAll">
        10项横/纵向研究课题，各部门大神亲身授学;研究生实验室buff加成，深度探讨高级技能
      </p>
      <p class="textAll">
        广美工业设计深度合作，联系各大高校资源;智汇+平台建设，高校技术资源平台共享
      </p>
      <p class="textAll">
        微软技术支持，开放全套Microsoft
        Azure服务;商业模式+品牌营销辅导，定期邀请大咖分享
      </p>

      <div></div>
      <!-- 利用纯css制作手动转换效果  -->
      <div class="carousel" style="margin-top: 80px">
        <!-- 轮播小按钮 -->
        <input type="radio" name="carouselInput" value="0" id="carouselInput1" checked hidden />
        <label for="carouselInput1"></label>

        <input type="radio" name="carouselInput" value="1" id="carouselInput2" hidden />
        <label for="carouselInput2"></label>

        <input type="radio" name="carouselInput" value="1" id="carouselInput3" hidden />
        <label for="carouselInput3"></label>

        <ul id="carouselList2">
          <li>
            <div class="present">
              <div class="presentBox">
                <img src="img/mirror.png" alt="mirror" />
                基于模式识别的智能交互镜
              </div>
              <div class="presentBox">
                <img src="img/smallRobot.png" alt="smallRobot" />
                小模块机器人
              </div>
              <div class="presentBox">
                <img src="img/arEnglish.png" alt="arEnglish" />
                AR英语学习系统
              </div>

              <div class="presentBox">
                <img src="img/3d.png" alt="3d.png" />远程控制自动装卸3D打印系统
              </div>
            </div>
          </li>
          <li>
            <div class="present">
              <div class="presentBox">
                <img src="img/mirror.png" alt="mirror" />
                123
              </div>
              <div class="presentBox">
                <img src="img/smallRobot.png" alt="smallRobot" />
                456
              </div>
              <div class="presentBox">
                <img src="img/arEnglish.png" alt="arEnglish" />
                123
              </div>

              <div class="presentBox">
                <img src="img/3d.png" alt="3d.png" />
                321
              </div>
            </div>
          </li>
          <li>
            <div class="present">
              <div class="presentBox">
                <img src="img/mirror.png" alt="mirror" />
                456
              </div>
              <div class="presentBox">
                <img src="img/smallRobot.png" alt="smallRobot" />
                哈哈哈
              </div>
              <div class="presentBox">
                <img src="img/arEnglish.png" alt="arEnglish" />
                好耶
              </div>

              <div class="presentBox">
                <img src="img/3d.png" alt="3d.png" />可以
              </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 第六页 -->
  <!-- 瀑布流布局 -->
  <div class="pageBox" id="columnBigBox">

    <div class="innerBox columnPage">

      <h1>加入我们</h1>
      <div class="textAll">
        如果你是零基础的小白<br />
        我们有私人订制的人才培养计划让你潜力无限<br /><br />
        如果你是身怀绝技的大神<br />
        我们提供更多更好的机会让你大展身手
      </div>
      <div class="intro">
        <img src="img/InternetOfThings.png" alt="物联网组">
        <h1>物联网组</h1>
        <div class="textAll">主要负责在X86或ARM架构上结合云计算实现智能化家居的软件开发<br />
          你将学到:<br />
          微软Azure云和百度云的使用，X86/ARM应用程序.
          开发<br />
          入门必备技能:掌握C#,Java,C++等任一编程语言</div>

      </div>

      <div class="intro">
        <img src="img/mechanics.png" alt="机械组">
        <h1>机械组</h1>
        <div class="textAll">主要负责机器人机械结构的设计加工<br />
          你将学到:<br />
          机械原理、机械加工装配、3D打印等知识<br />
          入门必备技能:<br />
          SolidWorks、机械设计和加工基础知识
        </div>


      </div>

      <div class="intro" style="
      transform: translate(0,-10px)">
        <img src="img/Administration.png" alt="管理组">
        <h1>管理组</h1>
        <div class="textAll">
          主要负责团队项目管理，竞赛管理，财务管理，
          文案撰写，视频、周边等宣传品的制作，活动策划<br />
          你将学到:<br />
          Photoshop等美工技能、办公实用管理技能<br />
          入门必备技能:文艺、气势

        </div>

      </div>
      <div class="intro" style="
      transform: translate(0,10px)">
        <img src="img/embedded .png" alt="嵌入式组">
        <h1>嵌入式组</h1>
        <div class="textAll">
          主要负责嵌入式设备调控，Linux系统开发<br />
          你将学到:<br />
          嵌入式开发等知识<br />
          入门必备技能:<br />
          入门一门程序设计语言或单片机基础

        </div>

      </div>

      <div class="intro">
        <img src="img/Front .png" alt="前端组">
        <h1>前端组</h1>
        <div class="textAll">主要负责在X86或ARM架构上结合云计算实现智能
          化家居的软件开发<br />
          你将学到:<br />
          微软Azure云和百度云的使用，X86/ARM应用程序
          开发<br />
          入门必备技能:掌握C#,Java,C++等任一编程语言

        </div>

      </div>

      <div class="intro">
        <img src="img/Circuit.png" alt="电路组">
        <h1>电路组</h1>
        <div class="textAll">主要负责机器人电子线路设计制作<br />
          你将学到:<br />
          电子电路、PCB设计、传感器等知识<br />
          入门必备技能:<br />
          Altium Designer、焊板子

        </div>

      </div>

      <ul class="smallballBox balls1">
        <li class="smallball"></li>
        <li class="smallball"></li>
        <li class="smallball"></li>
      </ul>
    </div>
  </div>
  <div class="pageBox recruit">
    <div class="textAll ">
      招新面向全校，全年开放<br />
      请将你的简历投递至<br />
      <span>alwaysbea@sina.com</span>
      <div id="recruitImg">
        <img src="img/qrCode.png" alt="报名二维码"><img src="img/A.png" alt="小A图标">
      </div>
    </div>

  </div>

  <!-- 页脚 版权信息 -->
  <div id="footer">
    Copyright © 小A智能创新创业团队
  </div>

</body>

</html>